<template>
  <div class="container">
    <div class="loginBox">
      <h3>手表配件库存管理系统</h3>
      <el-input
      class="un"
      placeholder="请输入管理员账号"
      v-model="user_data.username"
      prefix-icon="el-icon-user"
      clearable>
      </el-input>
      <el-input class="ps" placeholder="请输入密码" v-model="user_data.password" show-password prefix-icon="el-icon-lock"></el-input>
      <p style="width:215px; height:20px; margin:0 auto">
        <el-checkbox v-model="checked" style="float:left">记住我</el-checkbox>
        <el-link type="success" :underline='false' style="float:right;color:#377d9b" @click="forgetPassword">忘记密码</el-link>
      </p>
      <el-button class='loginBtn' type="primary" round @click.native="login" :loading="loginLoading">登录</el-button>
    </div>

  </div>
</template>

<script>
import storage from '@/utils/storage'
import secret from '@/utils/secret'
export default {
  name:'loginPager',
  data() {
    return {
      user_data:{
        username:'',
        password:''
      },
      checked:false,
      fjj:{},
      loginLoading:false,
      content:`请联系系统管理员重置密码`
      
    };
  },
  mounted() {
    this.checkData()
  },
  methods: {
    //点击登陆模块
    login(){
      if(this.user_data.username===''||this.user_data.password===''){
        this.$utils.message.warning(this,'账号密码未填写')
      }else{
        this.loginLoading=true
        //访问服务器登陆账号
        this.$http.login(this,this.user_data.username,this.user_data.password)
          .then(res=>{
            // 缓存信息
            this.setData(res.username,this.password)
            this.$store.commit('SET_PERMISSION_ID',res.role.objectId)
            this.loginLoading=false
          }).catch(error=>{
            console.log(error);
            this.loginLoading=false
        })
        
      }

    },

    setData(u,p,id,rid,n){
      //先加密密码存储
      let encryptPassword = secret.Encrypt(p)//加密密码
      if(this.checked){
        storage.setCookie('ac',secret.Encrypt(u),30)
        storage.setCookie('ps',encryptPassword,30)
      }else{ 
        storage.setCookie('ac',null,-1)
        storage.setCookie('ps',null,-1)
      }
      this.$router.replace({name:'home'})
    },


    checkData(){
      //判断cookie是否存在,存在则获取数据填充
      if(storage.getCookie('ac')&&storage.getCookie('ps')){
          this.checked=true
          this.user_data.username=secret.Decrypt(storage.getCookie('ac'))
          let decodeResult=secret.Decrypt(storage.getCookie('ps'))
          this.user_data.password=decodeResult
      }
    },
    forgetPassword(){
      this.$confirm(this.content, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString: true,
        type: 'warning',
        customClass:'messageBox'
      }).then(() => {
      }).catch(() => {  
      });
    }

  },
};
</script>

<style scoped lang='scss'>


@keyframes translateXAnimation {
  from {left: -100%;opacity: 0;}
  to {left: 30%;opacity: .9;}
}

@keyframes translateXAnimationHide {
  from {left:30%;opacity: .9;}
  to {left: -100%;opacity: 0;}
}

@keyframes translateYAnimation {
  from {bottom: -100%;opacity: 0;}
  to {bottom: 0px;opacity: .8;}
}

@keyframes translateYAnimationHide {
  from {bottom: 0px;opacity: .8;}
  to {bottom: -100%;opacity: 0;}
}


.container {
   background-color: $loginBackground;
   width: 100%;
   height: 100vh;
   position: relative;
}

.container:before,.container:after {
  width: 482px;
  height: 310px;
  background-position: bottom;
  animation-duration: 1s;
  animation-fill-mode: forwards;

}

@media screen and (min-width: 1201px) , (min-height:601px){
  
.container:before {
  background-image: url(../assets/bg1.jpg);
  background-repeat: no-repeat;
  background-position:center;
  background-size: contain;
  border-radius: 10px;
  box-shadow: 0 0 10px 5px #efefee;
  overflow: hidden;
  animation-name: translateXAnimation;
 
}

}


@media screen and (max-width: 1200px) , (max-height: 600px){
  // .container:after {
  //   animation-name: translateXAnimationHide;
  //   animation-duration: .8s;
  //   animation-fill-mode: forwards;
    
  // }

  .container:before {
    animation-name: translateXAnimationHide;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
  }
  .loginBox {
    left: 50% !important;
  }
  
}

.container:before  {
    content: '';
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%,-50%);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

 *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

h3 {
  margin-top: 35px;
  margin-bottom: 30px;
  font-size: 20px;
}
.loginBox {
  width: 420px;
  height: 310px;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 70%;
  transform: translate(-50%,-50%);
  border-radius: 10px;
  box-sizing: border-box;
  box-shadow: 0 0 10px 5px #efefee;
  overflow: hidden;
  text-align: center;

}
 .un,.ps {
  display: block;
  width: 220px;
  margin: 15px auto;
}

/deep/.el-input__inner {
  border-radius: 10px;
}

/deep/.el-input__inner:focus {
  border-color: $PrimaryColor;
}

.loginBtn {
  width: 215px;
  height: 40px;
  margin: 20px auto;
}

</style>
